<template>
	<div>
		<div style="background: #fff;border-radius: 16px;margin-bottom: 20px;" class="point">
			<div style="display: flex;align-items: center;padding: 10px;">
				<span>{{dataList.latestTime || '暂无最新时间'}}</span>

				<img v-if="dataList.onlineStatus == 'ONLINE'" src="@/assets/sIcon30.png"
					style="width: 20px;height: 20px;margin-left: 10px;" />
				<img v-else-if="dataList.onlineStatus == 'OFFLINE'" src="@/assets/sIcon32.png"
					style="width: 20px;height: 20px;margin-left: 10px;" />
			</div>

			<div style="font-size: 12px;color: #999;padding:0 10px 10px;">污染物</div>

			<div style="padding-bottom: 10px;">
				<div v-for="(item1,index1) in dataList.pollutionList"
					style="background: #ecf4fe;border-radius: 16px;padding: 20px;margin: 0 10px;width: calc(25% - 60px);display: inline-block;margin-bottom: 10px;">
					<div style="display: flex;align-items: center;justify-content: center;margin-bottom: 10px">
						<img src="@/assets/sIcon33.png" style="width: 30px;height: 20px;margin-right: 10px;" />
						<span>{{item1.pollutionName}}</span>
					</div>

					<div style="text-align: center;margin-bottom: 20px">
						<span
							style="font-size: 22px;color: #4994f1;margin-right: 10px;font-weight: bold;">{{item1.actualAmount}}</span>
						<span>{{item1.unitValue}}</span>
					</div>

					<div style="display: flex;justify-content: space-between;">
						<div style="position: relative;display: flex;align-items: center;">
							<img src="@/assets/sIcon34.png" style="width: 2px;height: 30px;" />
							<div style="margin-left: 10px;font-size: 12px;">
								<div>标杆</div>
								<div>
									<span style="font-size: 22px;margin-right: 10px;font-weight: bold;">{{item1.bgAmount || 0}}</span>
									<span style="color: #999;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>

						<div style="position: relative;display: flex;align-items: center;">
							<img src="@/assets/sIcon34.png" style="width: 2px;height: 30px;" />
							<div style="margin-left: 10px;font-size: 12px;">
								<div>折算</div>
								<div>
									<span style="font-size: 22px;margin-right: 10px;font-weight: bold;">{{item1.zsAmount || 0}}</span>
									<span style="color: #999;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="font-size: 12px;color: #999;padding:0 10px 10px;">烟气参数</div>

			<div style="display: flex;justify-content: space-around;padding-bottom: 10px;">
				<div v-for="(item1,index1) in dataList.regularList"
					style="background: #ecf4fe;border-radius: 16px;flex: 1;padding: 20px;flex: 1;margin: 0 10px;">
					<div style="display: flex;align-items: center;justify-content: center;margin-bottom: 10px">
						<img src="@/assets/sIcon35.png" style="width: 30px;height: 20px;margin-right: 10px;" />
						<span>{{item1.pollutionName}}</span>
					</div>

					<div style="text-align: center;margin-bottom: 20px">
						<span
							style="font-size: 22px;color: #F9D88F;margin-right: 10px;font-weight: bold;">{{item1.actualAmount}}</span>
						<span>{{item1.unitValue}}</span>
					</div>

					<div style="display: flex;justify-content: space-between;">
						<div style="position: relative;display: flex;align-items: center;">
							<img src="@/assets/sIcon34.png" style="width: 2px;height: 30px;" />
							<div style="margin-left: 10px;font-size: 12px;">
								<div>标杆</div>
								<div>
									<span style="font-size: 22px;margin-right: 10px;font-weight: bold;">{{item1.bgAmount || 0}}</span>
									<span style="color: #999;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>

						<div style="position: relative;display: flex;align-items: center;">
							<img src="@/assets/sIcon34.png" style="width: 2px;height: 30px;" />
							<div style="margin-left: 10px;font-size: 12px;">
								<div>折算</div>
								<div>
									<span style="font-size: 22px;margin-right: 10px;font-weight: bold;">{{item1.zsAmount || 0}}</span>
									<span style="color: #999;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div style="background: #fff;border-radius: 16px;padding: 10px;">

			<div class="displayFlex" style="margin-bottom: 10px;">
				<el-radio-group v-model="timeType" style="margin-right: 10px;" size="mini" @change="formLineData">
					<el-radio-button label="天"></el-radio-button>
					<el-radio-button label="小时"></el-radio-button>
					<el-radio-button label="分钟"></el-radio-button>
				</el-radio-group>

				<div v-if="timeType == '天'">
					<span style="margin:0 10px;color: #999;font-size: 12px;">日期：</span>
					<el-date-picker v-model="timeDate" type="month" placeholder="日期" start-placeholder="日期"
						end-placeholder="日期" size="small" format="yyyy-MM" value-format="yyyy-MM"
						style="border-radius: 20px;" :clearable="false">
					</el-date-picker>
				
					<el-button size="small" @click="formLineData()" class="ml10" type='primary'>查询</el-button>
				</div>
				
				<div v-if="timeType == '小时'">
					<span style="margin:0 10px;color: #999;font-size: 12px;">日期：</span>
					<el-date-picker v-model="timeDate" type="date" placeholder="日期" start-placeholder="日期"
						end-placeholder="日期" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
						style="border-radius: 20px;" :clearable="false">
					</el-date-picker>
				
					<el-button size="small" @click="formLineData()" class="ml10" type='primary'>查询</el-button>
				</div>
				
				<div v-if="timeType == '分钟'">
					<span style="margin:0 10px;color: #999;font-size: 12px;">日期：</span>
					<el-date-picker v-model="timeDate" type="date" placeholder="开始日期" start-placeholder="开始日期"
						end-placeholder="开始日期" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
						style="border-radius: 20px;" :clearable="false">
					</el-date-picker>
				
					<span style="margin:0 10px;color: #999;font-size: 12px;">小时：</span>
					<el-time-picker v-model="timeValue1" placeholder="开始时间" value-format="HH" format="HH小时">
					</el-time-picker>
				
					<el-button size="small" @click="formLineData()" class="ml10" type='primary'>查询</el-button>
				</div>
			</div>


			<div v-for="(item,index) in pollutionList">
				<!-- <div style="font-size: 16px;color: #999;">{{item.pollutionName}}</div> -->
				<div style="width: 100%;height: 300px;" :key="index" :id="'lineChart'+index"></div>
			</div>

		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'

	let that
	export default {
		data() {
			return {
				dataList: {},
				pollutionList: [],
				params: {
					outletId: '',
					startTime: '',
					endTime: ''
				},
				timeType: '天',
				selectData: '',
				timeDate: moment().format('YYYY-MM-DD'),
				timeValue1: moment().format('HH'),

			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.outletId = that.getQueryString("outletId")
			that.getWaterOnlineLatestMonitorByOutletId()

			that.formLineData()
		},

		methods: {

			async formLineData() {
				function getWaterActualOnlineMonitorDivisorList() {
					return new Promise((resolve, reject) => {
						let api
						if (that.timeType == "天") {
							let thisTimeDate = moment(that.timeDate).format('YYYY-MM')
							let maxDay = '' + moment(that.timeDate, "YYYY-MM").daysInMonth();
						
							that.params.startTime = thisTimeDate + "-01 00:00:00"
							that.params.endTime = thisTimeDate + "-" + maxDay + " 23:59:59"
						
							api = '/waterOutlet/getWaterDayOnlineMonitorDivisorList'
						} else if (that.timeType == "小时") {
							that.params.startTime = that.timeDate + " " + "00:00:00"
							that.params.endTime = that.timeDate + " " + "23:59:59"
						
							api = '/waterOutlet/getWaterHourOnlineMonitorDivisorList'
						} else {
							that.params.startTime = that.timeDate + " " + that.timeValue1 + ":00:00"
							that.params.endTime = that.timeDate + " " + that.timeValue1 + ":59:59"
						
							api = 'waterOutlet/getWaterMinuteOnlineMonitorDivisorList'
						}
						that.ajax({
							url: api,
							data: JSON.stringify(that.params),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									resolve(result.data)
								}
							},
						}, "加载中...")
					})
				}

				let dataList = await getWaterActualOnlineMonitorDivisorList()
				that.pollutionList = dataList.pollutionList

				setTimeout(function() {
					for (let key in dataList.pollutionList) {
						let chartDom = document.getElementById('lineChart' + key);
						let myChart = echarts.init(chartDom);
						let option;
						let pollution = dataList.pollutionList[key]

						let series = [{
							name: dataList.pollutionList[key].pollutionName,
							type: 'line',
							color: '#' + Math.floor(Math.random() * 16777215).toString(16),
							showSymbol: false,
							data: [],
							markPoint: {
								data: [{
									type: 'max',
									name: 'Max'
								}]
							},
							markLine: {
								label: {
									show: true,
									formatter: function(params) {
										return params.name + "：" + params.value
									}
								},
								data: [{
									type: 'max',
									name: '最大值'
								}]
							}
						}]

						if (that.timeType == "小时") {
							if (pollution.hourLimitConcentration) {
								series[0].markLine.data.push({
									name: '浓度日限制',
									yAxis: pollution.hourLimitConcentration
								})
							}
						} else {
							if (pollution.dayLimitConcentration) {
								series[0].markLine.data.push({
									name: '浓度日限制',
									yAxis: pollution.dayLimitConcentration
								})
							}
						}

						for (let item of dataList.dataList) {
							series[0].data.push({
								//name: pollution.pollutionName,
								value: [
									item.createTime,
									item.pollutionList[key].couAmount || 0,
								]
							})
						}

						option = {
							animation: false,
							grid: {
								show: false,
								top: '20%',
								right: '10%',
								bottom: '10%',
								left: '10%'
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross'
								},
								backgroundColor: 'rgba(255, 255, 255, 0.8)',
								formatter: function(params) {
									let str = ''
									let thisDataList = dataList.dataList
									str += thisDataList[params[0].dataIndex].createTime + '<br/>'
									for (let key1 in params) {
										let item = params[key1]

										str += thisDataList[item.dataIndex].pollutionList[key]
											.pollutionName + "："
										str += thisDataList[item.dataIndex].pollutionList[key]
											.couAmount || 0 +
											"（实测）"
										// str += thisDataList[item.dataIndex].pollutionList[key]
										// 	.zsAmount || 0 +
										// 	"（折算）"
										str += '<br/>'

										for (let item2 of thisDataList[item.dataIndex].regularList) {
											str += item2.pollutionName + "："
											str += (item2.couAmount || 0) + item2.unitValue
											str += '<br/>'
										}
										str += '<br/>'

									}
									return (str);
								},
							},
							xAxis: {
								type: 'time',
								splitLine: {
									show: false
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: '#91bbf7',
										width: 2
									}
								},
								axisLabel: {
									show: true,
									textStyle: {
										color: '#333',
										fontSize: 14,
										fontWeight: 'bold'
									}
								},
							},
							yAxis: {
								name: dataList.pollutionList[key].pollutionName + "产生量(" + dataList
									.pollutionList[key].unitCode + ")",
								nameTextStyle: {
									fontSize: 16,
									color: "#333",
									fontWeight: "bold",
									padding: [0, 0, 20, 0]
								},
								type: 'value',
								splitLine: {
									show: false,
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: '#91bbf7',
										width: 2
									}
								},
								axisLabel: {
									show: true,
									textStyle: {
										color: '#333',
										fontSize: 14,
										fontWeight: 'bold'
									}
								},
							},
							series: series
						};

						option && myChart.setOption(option);
					}
				}, 1000)
			},

			getWaterOnlineLatestMonitorByOutletId: function(value) {
				that.ajax({
					url: '/waterOutlet/getWaterOnlineLatestMonitorByOutletId',
					dataType: 'json',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						that.dataList = result.data
					}
				})
			},

			// 查看是否为空
			isNull(value) {
				if (value) {
					return false;
				}
				return true;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>